new Vue({
    el: '#app',
    data: {
        apiBase: 'http://api.aulence.com/practice/',
        sellerInfo: [],
        seller: {
            image: '',
            name: '',
            pickup: false,
            salesCount: 0,
            timeUsed: 0,
            distance: 0,
            startFee: 0,
            transportFee: 0,
            activities: '<p><span class="red">减</span>满20减8;满50减25;满80减45;满100减55</p><p><span class="purple">减</span>新用户立减15元;首次使用银行卡支付半价</p>'
        },
        panelShow: false
    },
    /* 声明周期函数：数据构建完成后执行 */
    created() {
        // 获取数据并进行处理
        this.getDataProcess('sellerInfo.json');
    },
    /* 计算属性 */
    computed: {
        sellerCounter() {
            return this.sellerInfo.length;
        }
    },
    /* 方法添加部分 */
    methods: {
        /**
         * 获取数据并进行处理
         * @param {String} apiName 数据接口名称
         */
        getDataProcess(apiName) {
            axios.get(this.apiBase + apiName)
                .then(resp => {
                    // 重设商家信息数据
                    this.sellerInfo = resp.data;
                });
        },
        /**
         * 添加商家
         */
        addSeller() {
            // 新增商家数据
            this.sellerInfo.push(this.seller);
            // 调用关闭表单面板的相关事件
            this.closeFormPanel();
        },
        /**
         * 关闭表单面板的相关事件
         */
        closeFormPanel() {
            // 设置表单的v-show状态为false
            this.panelShow = false;
            // 重置表单元素
            this.seller = {
                image: '',
                name: '',
                pickup: false,
                salesCount: 0,
                timeUsed: 0,
                distance: 0,
                startFee: 0,
                transportFee: 0,
                activities: '<p><span class="red">减</span>满20减8;满50减25;满80减45;满100减55</p><p><span class="purple">减</span>新用户立减15元;首次使用银行卡支付半价</p>'
            }
        }
    }
});